<template>
	<scroll-view class="s">	<image src="../../static/success.png"></image>
	<view class="s1">请耐心等待师傅上门服务！</view>
	<button class="btn1" @click="btn1">查看订单</button>
	<button class="btn2" @click="btn2">继续预约</button>
	<!-- 优选服务部分 -->
	  <view class="service-section" style="margin-right: 50px;">
	    <view class="section-title">
	      <text>优选服务</text>
	    </view>
	    <view class="service-list">
	      <view class="service-item" v-for="item in serviceItems" :key="item.id">
	        <image class="service-image" :src="item.image"></image>
	        <view class="service-desc">
	          <text class="service-name">{{ item.name }}</text>
	       .   <text class="service-tag">{{ item.tag }}</text>
	          <button class="book-btn">立即预约</button>
	        </view>
	      </view>
	    </view>
	  </view>
	
	</scroll-view>

</template>
  
<script setup>
import { ref } from 'vue';
	const serviceItems = ref([
	  { id: 1, image: '/static/阳台漏水.png', name: '阳台漏水', tag: '免费上门' },
	  { id: 2, image: '/static/灶具维修.png', name: '灶具维修', tag: '保修30天' },
	  { id: 3, image: '/static/疏通马桶.png', name: '疏通马桶', tag: '不通不收费' },
	  { id: 4, image: '/static/阳台漏水.png', name: '阳台漏水', tag: '免费上门' },
	  { id: 5, image: '/static/灶具维修.png', name: '灶具维修', tag: '保修30天' },
	  { id: 6, image: '/static/疏通马桶.png', name: '疏通马桶', tag: '不通不收费' }
	]);
	const btn1 =()=>{
		   uni.navigateTo({
     url: '/pages/index/order/datails_one'
						         });
	}
	const btn2 =()=>{
		   uni.switchTab({
	 url: '/pages/booking/booking'
						         });
	}
	
</script>

<style lang="scss">
	.btn1{
		display: inline;
	    color: #7a76fa;
		margin-left: 120rpx;
		
	}
	.btn2{
		display: inline;
		color: #7a76fa;
		margin-left: 30rpx;
	}
	page {
		background-color: white;
		
	}
.s{
	margin-left: 60rpx;
}
.s1{
	margin-left: 150rpx;
	color: darkgray;
}
/* 优选服务部分样式 */
.service-section {
  margin-top: 10px;

}

.service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.service-item {
  width: 48%;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.service-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.service-desc {
  padding: 10px;
}

.service-name {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}

.service-tag {
  color: #999;
  font-size: 12px;
}

.book-btn {
  width: 100%;
  padding: 10px;
  background-color: #629DFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
}

.small-image {
  width: 24px;
  height: 24px;
}
</style>
